<template>
  <el-form :model="nodeModalForm" ref="nodeModal" label-placement="left" label-width="100px" :rules="nodeModalRules"
           size="small">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="节点名称" prop="nodeName">
          <el-input v-model.trim="nodeModalForm.nodeName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="分组列" prop="groupName">
          <el-select v-model="nodeModalForm.groupName" class="w_100" clearable filterable>
            <el-option v-for="item in fieldsList" :key="item.alias" :label="item.alias" :value="item.alias">
              <span style="float: left">{{ item.alias }}</span>
              <span style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">{{
                  item.DATA_TYPE
                }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="转换列" prop="changeColumn">
          <el-select v-model="nodeModalForm.changeColumn" class="w_100" clearable filterable>
            <el-option v-for="item in fieldsList" :key="item.alias" :label="item.alias" :value="item.alias">
              <span style="float: left">{{ item.alias }}</span>
              <span style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">{{
                  item.DATA_TYPE
                }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="转换值" prop="limit">
          <el-select v-model="nodeModalForm.changeValue" class="w_100" clearable
                     filterable>
            <el-option v-for="item in fieldsList" :key="item.alias" :label="item.alias" :value="item.alias">
              <span style="float: left">{{ item.alias }}</span>
              <span style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">{{
                  item.DATA_TYPE
                }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="聚合方式" prop="limit">
          <el-select v-model="nodeModalForm.groupType" class="w_100" clearable
                     filterable>
            <el-option label="最大值" value="MAX"></el-option>
            <el-option label="最小值" value="MIN"></el-option>
            <el-option label="平均值" value="AVG"></el-option>
            <el-option label="累计值" value="SUM"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <div class="nodeModal-footer">
      <span class="dialog-footer">
        <el-button plain @click="handleConfigCancel">取消</el-button>
        <el-button type="primary" @click="handleConfigConfirm">更新</el-button>
      </span>
    </div>
  </el-form>
</template>

<script>
import { computed, defineComponent, inject, onMounted, ref } from "vue"
import { useEtlStore } from "../../../../../store/flowEtl"
import { etlArrayToTree } from "../../../../../utils/tree"
import { getETLNodeData } from "../../../../../service/data_etl"

export default defineComponent({
  name: "node-config-ctr",
  props: {
    node: Object,
  },
  components: {},
  setup (props, ctx) {
    const etlStore = useEtlStore()
    const nodeList = computed(() => etlStore.nodeList)
    const lineList = computed(() => etlStore.lineList)
    const data_etl_id = computed(() => etlStore.data_etl_id)
    const nodeConfigClose = inject("nodeConfigClose")
    const nodeModalForm = ref({
      nodeName: "",
      groupName: "",
      changeValue: "",
      changeColumn: "",
      groupType:"",
      fields: [],
    })
    const fieldsList = ref([])
    const nodeModal = ref()
    const tableLoading = ref(false)
    const tableList = ref([])
    const nodeModalRules = ref({
      nodeName: {
        required: true,
        message: "请输入节点名称",
        trigger: "blur",
      },
      groupName: {
        required: true,
        message: "请选择分组列",
        trigger: "change",
      },
      changeValue: {
        required: true,
        message: "请选择转换值",
        trigger: "change",
      },
      changeColumn: {
        required: true,
        message: "请选择转换列",
        trigger: "change",
      },
      groupType: {
        required: true,
        message: "请选择聚合方式",
        trigger: "change",
      },
    })
    const handleConfigCancel = () => {
      nodeConfigClose()
    }
    const nodeConfigUpdate = (node) => {
      node.fields = []
      let originLine = [...lineList.value].find(
          (item) => item.to === props.node.id
      )
      let originNode = [...nodeList.value].find(
          (item) => item.id === originLine.from
      )
      let nodeTree = etlArrayToTree(
          lineList.value,
          originNode.id,
          "from",
          "to",
          nodeList.value
      )
      originNode.children = nodeTree
      getETLNodeData({
        data_etl_id: data_etl_id.value,
        node: JSON.stringify(originNode),
      }).then((res) => {
        node.fields = [fieldsList.value.find(
            (item) => item.alias === node.groupName
        )]
        let columns = res.data.map((item) => {
          return item[node.changeColumn]
        })
        let changeValueType = fieldsList.value.find(
           (item) => item.alias === node.changeColumn
        )
        let columnsSet = new Set([...columns])
        for (let item of columnsSet) {
          // 遍历Array
          node.fields.push({
            COLUMN_COMMENT: item,
            COLUMN_NAME: item,
            DATA_TYPE: changeValueType.DATA_TYPE,
            alias: item,
          })
        }
        // res.data
        let nodes = [...nodeList.value].map((item) => {
          if (item.id === node.id) {
            item.status = true
            item.nodeName = node.nodeName
            item.config.fields = node.fields
            item.config.groupName = node.groupName
            item.config.changeColumn = node.changeColumn
            item.config.changeValue = node.changeValue
            item.config.groupType = node.groupType
          }
          return item
        })
        etlStore.setNodeList(nodes)
        nodeConfigClose()
      })
    }
    const handleConfigConfirm = () => {
      nodeModal.value.validate((valid) => {
        if (valid) {
          nodeConfigUpdate(nodeModalForm.value)
        } else {
          return false
        }
      })
    }
    const resetForm = () => {
      fieldsList.value = []
      nodeModalForm.value = {
        id: null,
        nodeName: "",
        groupName: "",
        changeValue: "",
        changeColumn: "",
        groupType:"",
        fields: [],
      }
    }
    onMounted(() => {
      resetForm()
      fieldsList.value = props.node.originFields
      nodeModalForm.value = {
        id: props.node.id,
        nodeName: props.node.nodeName || "",
        groupName: props.node.config.groupName || "",
        changeValue: props.node.config.changeValue || "",
        changeColumn: props.node.config.changeColumn || "",
        groupType: props.node.config.groupType || "",
        fields: props.node.config.fields || [],
      }
    })
    return {
      nodeList,
      lineList,
      data_etl_id,
      fieldsList,
      tableLoading,
      nodeModalForm,
      tableList,
      nodeModalRules,
      nodeModal,
      nodeConfigClose,
      resetForm,
      handleConfigCancel,
      handleConfigConfirm,
      nodeConfigUpdate,
    }
  },
})
</script>

<style scoped>
.field-table {
  padding: 0 12px 24px;
}

.nodeModal-footer {
  padding: var(--el-dialog-padding-primary);
  padding-top: 10px;
  text-align: right;
  box-sizing: border-box;
}
</style>